استریمینگ در ری‌اکت: رندرینگ تدریجی سمت سرور برای بهینه‌سازی تجربه کاربری

در دنیای توسعه وب، ارائه یک تجربه کاربری سریع و پاسخگو از اهمیت بالایی برخوردار است. کاربران انتظار دارند وب‌سایت‌ها به سرعت بارگذاری شوند و بدون تأخیر تعاملی باشند. ری‌اکت، یک کتابخانه محبوب جاوااسکریپت برای ساخت رابط‌های کاربری، تکنیک قدرتمندی به نام رندرینگ سمت سرور جریانی (Streaming Server-Side Rendering یا SSR) برای مقابله با این چالش ارائه می‌دهد. این مقاله به بررسی مفهوم استریمینگ SSR در ری‌اکت می‌پردازد و مزایا، پیاده‌سازی و تأثیر آن بر عملکرد وب‌سایت و تجربه کاربری را بررسی می‌کند.

رندرینگ سمت سرور (SSR) چیست؟

رندرینگ سنتی سمت کلاینت (CSR) شامل دانلود فایل‌های HTML، جاوااسکریپت و CSS توسط مرورگر و سپس رندر کردن محتوا در سمت کلاینت است. اگرچه این رویکرد انعطاف‌پذیر است، اما می‌تواند منجر به تأخیر در رندر اولیه شود، زیرا کاربر باید منتظر بماند تا تمام منابع دانلود شده و جاوااسکریپت اجرا شود تا محتوایی را ببیند. از سوی دیگر، SSR کامپوننت‌های ری‌اکت را در سرور رندر کرده و HTML کاملاً رندر شده را به کلاینت ارسال می‌کند. این امر منجر به زمان بارگذاری اولیه سریع‌تر می‌شود، زیرا مرورگر HTML کاملاً شکل‌گرفته‌ای را دریافت می‌کند که می‌تواند فوراً نمایش داده شود.

محدودیت‌های SSR سنتی

در حالی که SSR سنتی بهبود قابل توجهی نسبت به CSR ارائه می‌دهد، محدودیت‌های خاص خود را نیز دارد. در SSR سنتی، کل برنامه باید قبل از ارسال هرگونه HTML به کلاینت، در سرور رندر شود. این می‌تواند یک گلوگاه باشد، به خصوص برای برنامه‌های پیچیده با چندین کامپوننت و وابستگی‌های داده. زمان تا اولین بایت (TTFB) می‌تواند بالا باشد، که منجر به درک کندی توسط کاربر می‌شود.

ورود استریمینگ SSR در ری‌اکت: یک رویکرد تدریجی

استریمینگ SSR در ری‌اکت با اتخاذ یک رویکرد تدریجی بر محدودیت‌های SSR سنتی غلبه می‌کند. به جای منتظر ماندن برای رندر شدن کل برنامه در سرور، استریمینگ SSR فرآیند رندر را به قطعات کوچکتر تقسیم کرده و این قطعات را به محض در دسترس قرار گرفتن به کلاینت استریم می‌کند. این به مرورگر اجازه می‌دهد تا نمایش محتوا را خیلی زودتر شروع کند، عملکرد درک شده را بهبود بخشیده و TTFB را کاهش دهد. این را می‌توان مانند رستورانی در نظر گرفت که غذای شما را در مراحل مختلف آماده می‌کند: ابتدا پیش‌غذا سرو می‌شود، سپس غذای اصلی و در نهایت دسر، به جای اینکه منتظر بمانید تا کل وعده غذایی به یکباره آماده شود.

مزایای استریمینگ SSR در ری‌اکت

استریمینگ SSR در ری‌اکت مزایای متعددی برای عملکرد وب‌سایت و تجربه کاربری ارائه می‌دهد:

• زمان بارگذاری اولیه سریع‌تر: با استریم کردن قطعات HTML به کلاینت، مرورگر می‌تواند نمایش محتوا را خیلی زودتر شروع کند، که منجر به زمان بارگذاری درک شده سریع‌تر و بهبود تعامل کاربر می‌شود.
• بهبود زمان تا اولین بایت (TTFB): استریمینگ SSR با ارسال قطعه اولیه HTML به محض آماده شدن، به جای منتظر ماندن برای رندر شدن کل برنامه، TTFB را کاهش می‌دهد.
• تجربه کاربری بهبود یافته: زمان بارگذاری اولیه سریع‌تر منجر به تجربه کاربری بهتری می‌شود، زیرا کاربران منتظر نمایش محتوا نمی‌مانند.
• سئوی بهتر: موتورهای جستجو می‌توانند محتوا را به طور مؤثرتری کراول و ایندکس کنند، زیرا HTML به راحتی در سرور در دسترس است.
• هیدریشن تدریجی (Progressive Hydration): استریمینگ SSR امکان هیدریشن تدریجی را فراهم می‌کند، جایی که کد ری‌اکت سمت کلاینت به تدریج شنوندگان رویداد را متصل کرده و با استریم شدن قطعات HTML، برنامه را تعاملی می‌کند.
• استفاده بهینه از منابع: با تقسیم فرآیند رندر به قطعات کوچکتر، استریمینگ SSR می‌تواند استفاده از منابع را در سرور بهبود بخشد.

استریمینگ SSR در ری‌اکت چگونه کار می‌کند؟

استریمینگ SSR در ری‌اکت از API ReactDOMServer.renderToPipeableStream() برای استریم کردن قطعات HTML به کلاینت استفاده می‌کند. این API یک استریم قابل خواندن (readable stream) را برمی‌گرداند که می‌تواند به شیء پاسخ (response object) سرور پایپ شود. در اینجا یک تصویر ساده از نحوه کار آن ارائه شده است:

1. سرور یک درخواست برای یک صفحه دریافت می‌کند.
2. سرور ReactDOMServer.renderToPipeableStream() را برای رندر کردن برنامه ری‌اکت به یک استریم فراخوانی می‌کند.
3. استریم با رندر شدن کامپوننت‌های ری‌اکت شروع به انتشار قطعات HTML می‌کند.
4. سرور استریم را به شیء پاسخ پایپ کرده و قطعات HTML را به کلاینت ارسال می‌کند.
5. مرورگر قطعات HTML را دریافت کرده و شروع به نمایش تدریجی آنها می‌کند.
6. پس از دریافت تمام قطعات HTML، مرورگر برنامه ری‌اکت را هیدراته کرده و آن را تعاملی می‌کند.

پیاده‌سازی استریمینگ SSR در ری‌اکت

برای پیاده‌سازی استریمینگ SSR در ری‌اکت، به یک سرور Node.js و یک برنامه ری‌اکت نیاز دارید. در اینجا یک راهنمای گام به گام ارائه شده است:

1. راه‌اندازی یک سرور Node.js: یک سرور Node.js با استفاده از یک فریم‌ورک مانند Express یا Koa ایجاد کنید.
2. نصب React و ReactDOMServer: بسته‌های react و react-dom را نصب کنید.
3. ایجاد یک برنامه ری‌اکت: یک برنامه ری‌اکت با کامپوننت‌هایی که می‌خواهید در سرور رندر شوند، ایجاد کنید.
4. استفاده از ReactDOMServer.renderToPipeableStream(): در کد سرور خود، از API ReactDOMServer.renderToPipeableStream() برای رندر کردن برنامه ری‌اکت خود به یک استریم استفاده کنید.
5. پایپ کردن استریم به شیء پاسخ: استریم را به شیء پاسخ سرور پایپ کنید تا قطعات HTML به کلاینت ارسال شوند.
6. مدیریت خطاها: مدیریت خطا را برای گرفتن هرگونه خطایی که ممکن است در طول فرآیند رندر رخ دهد، پیاده‌سازی کنید.
7. افزودن تگ اسکریپت برای هیدریشن: یک تگ اسکریپت در HTML برای هیدراته کردن برنامه ری‌اکت در سمت کلاینت قرار دهید.

نمونه کد (سمت سرور):

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./App'); // کامپوننت ری‌اکت شما

const app = express();
const port = 3000;

app.get('/', (req, res) => {
  const { pipe, abort } = ReactDOMServer.renderToPipeableStream(, {
    bootstrapModules: [require.resolve('./client')], // نقطه ورود سمت کلاینت
    onShellReady() {
      res.setHeader('content-type', 'text/html; charset=utf-8');
      pipe(res);
    },
    onError(err) {
      console.error(err);
      res.statusCode = 500;
      res.send('
متاسفانه، مشکلی پیش آمد
');
    }
  });

  setTimeout(abort, 10000); // اختیاری: تنظیم زمان وقفه برای جلوگیری از معلق ماندن نامحدود
});

app.use(express.static('public')); // سرو کردن فایل‌های استاتیک

app.listen(port, () => {
  console.log(`سرور در آدرس http://localhost:${port} در حال اجراست`);
});

نمونه کد (سمت کلاینت - `client.js`):

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.hydrateRoot(document,
    
);

نمونه کامپوننت برنامه ری‌اکت (App.js):

import React, { Suspense } from 'react';

function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("داده با موفقیت بارگذاری شد!");
    }, 2000);
  });
}

function SlowComponent() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetchData().then(result => setData(result));
  }, []);

  if (!data) {
    throw new Promise(resolve => setTimeout(resolve, 2000)); // شبیه‌سازی تأخیر در بارگذاری
  }

  return 
{data}
;
}

export default function App() {
  return (
    

      
به استریمینگ SSR خوش آمدید!
      
این یک نمایش از استریمینگ SSR در ری‌اکت است.
      در حال بارگذاری...
}>